Q&A

功能說明

• 每個Q&A方格都有 :
  1. 問題
  2. 回答
  3. 開啟按鈕
  4. 關閉按鈕
     

HTML重點

1. 主框架 :

   <section class="questions">
   
       <!-- 標題 -->
       <div class="title">
           <h2>general questions</h2>
       </div>
   
       <!-- Q&A -->
       <div class="section-center">
         <!-- ...詳細內容... -->
       </div>
   </section>
   

2. 單一Q&A方格 :

   <!-- 單一QA -->
       <article class="question">
   
           <!-- 問題區域 -->
           <div class="question-title">
               <p>Question.....</p>
               <!-- 按鈕 -->
               <button type="button" class="question-btn">
                   <!-- 開啟按鈕 -->
                   <span class="plus-icon">
                       <i class="far fa-plus-square"></i>
                   <!-- 關閉按鈕 -->
                   </span>
                   <span class="minus-icon">
                       <i class="far fa-minus-square"></i>
                   </span>
               </button>
           </div>
   
           <!-- 回答區域 -->
           <div class="question-text">
               <p>
                 Answer...
               </p>
           </div>
   
       </article>
   <!-- 單一QA end -->
   

• 重點 :
  1. 將整個單一QA區域的Class設為question
  2. 將回答區域的Class設為question-text
  3. 將開啟按鈕的Class設為plus-icon
  4. 將關閉按鈕的Class設為minus-icon

CSS重點

• CSS多重選擇器 :
  EX :

  .one .two{}    /*兩個 class 中有空格*/
  .one.two{}     /*兩個 class 中沒有空格*/
  .one, .two{}   /*兩個 class 中出現逗號*/
  

  • 差別 :

    • .one.two{} : 某個區塊必須同時具有one和 two的 class 時，才能被CSS所選擇的到。

    • .one .two{} : 必須要是在one裡面的two，才會被選擇到。例如 :

      <div class = "one">
          <div class = "two">
              ..欲選擇之內容..
          </div>
      </div>
      

    • .one, .two{} : 指class中有one或two，都會被編輯器所選擇到。

以下為重點程式碼 :

• 首先，question、question-text、plus-icon與minus-icon有各自的設定:

  .question {
      ...
  }
  .question-text {
      ...
  }
  .plus-icon {
      ...
  }
  .minus-icon {
      ...
  }
  

• 接著，再另外創立一個同為question-text的Class，將回答區域隱藏起來 :

  .question-text {
    display: none;
  }
  

此Class與上方所提的同名Class，在被呼叫時會一起被執行

• 同理，也另外創立一個同為minus-icon的Class，將關閉按鈕隱藏起來 :

  .minus-icon {
    display: none;
  }
  

• 最後，創立一個show-text的Class，並利用上述所提CSS多重選擇器的特性，去指定開啟回答區域的顯示方式 :

  /* 顯示回答區域*/
  .show-text .question-text {
    display: block;
  }
  /* 顯示關閉按鈕*/
  .show-text .minus-icon {
    display: inline;
  }
  /* 隱藏開啟按鈕*/
  .show-text .plus-icon {
    display: none;
  } 
  

JavaScript重點

由上述CSS重點可知，只要在<article class="question">...</article>中新增show-text的Class，便能顯示回答區域；反之，當移除show-text，就能關閉回答區域。

1. 利用class="question"去抓取每個article(等同於抓取每個單一QA)

   const questions = document.querySelectorAll('.question');  
   

2. 主要點擊事件

   questions.forEach(function(question){ //選擇每個QA方格
   
       const btn = question.querySelector('.question-btn'); //篩選出該QA方格的按鈕元素
   
       btn.addEventListener('click',function(){ //只要該QA方格的按鈕元素有點擊事件
   
           question.classList.toggle("show-text"); //就在<article class="question">新增/刪除"show-text"的Class
       });
   });
   

3. 同樣在btn.addEventListener()中，插入以下程式碼，便能達到「一個回答區域開啟時，其他回答區域皆關閉」的效果

   questions.forEach(function(item){ //選擇每個QA方格
   
       if(item !== question){ //只要不是被選擇的article
   
           item.classList.remove("show-text"); //就將"show-text"的Class移除
   
       };
   });
   

參考與引用來源

1. CSS多重選擇器介紹
2. 多個 class 的表示法和寫法